import React from 'react';
import {Button, Divider,Card,Row,Col,Collapse} from 'antd';
import {useState,useRef,useEffect} from "react";
import './style/index.css';
import hljs from 'highlight.js/lib/core';
import 'highlight.js/styles/github.css';
import javascript from 'highlight.js/lib/languages/javascript';
import {flushSync} from "react-dom";
hljs.registerLanguage('javascript', javascript);
export const UseStateHooks = function () {

    console.log('render');

    //   值           修改状态的函数
    let [num,setNum] = useState(0);

    const handler = ()=>{
        setNum(200);
        setTimeout(()=>{
            console.log(num);//为什么不是200？
            //setNum后react不会立即更新，而是将更新操作放入队列，等待合适的时机再批量处理这些更新
            //setTimeout形成了闭包，闭包引用的变量是更新前的初始变量0
        },2000)
    }


    let [vote,setVote] = useState({
        up:0,
        down:0
    });

    //赞成
    const up = ()=>{
        setVote({
            ...vote,//useState修改值不支持差异修改，必须展开原有的值
            up:vote.up+1,//不能++，因为++是两步操作 1. 返回vote.up原有的值；2.自增1；setVote拿到的原有的值但是对于自增1不会检测到
        })
    }

    const down = ()=>{
        setVote({
            ...vote,
            down:vote.down+1,
        })
    }

    //官方推荐的写法==========================

    let [voteUp,setVoteUp] = useState(0);

    let [voteDown,setVoteDown] = useState(0);

    const suggestUp = ()=>{
        setVoteUp(voteUp+1);
    }

    const suggestDown = ()=>{
        setVoteDown(voteDown+1);
    }

    //=========================

    const [loopValue,setLoopValue] = useState(10);

    const loop = ()=>{
        for (let i = 0; i < 10; i++) {
            //setLoopValue(1+loopValue);//只更新一次,结果11
            //why?
            //1.更新一次在于react把操作放入了队列中，只执行一次以优化性能
            //2. 结果11为每一次的更新由于闭包原因只取到了初始化的loopValue即10
            flushSync(()=>{
                setLoopValue(1+loopValue);
            })
        }
    }


    const collapseData =  [
        {
            label: 'useState初探',
            key: '1',
            children:<>
                <Card  className={'card'}  title="useState初探" style={{ width: 1000 }}>
                    <Row>
                        <Col push={3} xs={12}>
                            数量:{num}
                            <UseStateFirst/>
                        </Col>
                    </Row>
                    <Divider/>
                    <Row>
                        <Col push={3} xs={6}>
                            <Button type="primary" onClick={handler}>plus one</Button>
                        </Col>
                    </Row>
                </Card>
                <Divider/>
            </>
        },
        {
            label: 'useState差异修改前需展开',
            key:'2',
            children:<>
                <Card  className={'card'}  title="useState差异修改前需展开" style={{ width: 800 }}>
                    <Row>
                        <Col push={3} xs={12}>
                            赞成人数:{vote.up}
                        </Col>
                        <Col push={1} xs={12}>
                            反对人数:{vote.down}
                        </Col>
                    </Row>
                    <Divider/>
                    <Row>
                        <Col push={3} xs={6}>
                            <Button type="primary" onClick={up}>赞成</Button>
                        </Col>
                        <Col push={6} xs={4}>
                            <Button type="primary" danger onClick={down}>反对</Button>
                        </Col>
                    </Row>
                </Card>

                <Divider/>
            </>
        },
        {
            label:'useState官方推荐的做法',
            key:'3',
            children:<>
                <Card  className={'card'}  title="useState官方推荐的改法" style={{ width: 800 }}>
                    <Row>
                        <Col push={3} xs={12}>
                            赞成人数:{voteUp}
                        </Col>
                        <Col push={1} xs={12}>
                            反对人数:{voteDown}
                        </Col>
                    </Row>
                    <Divider/>
                    <Row>
                        <Col push={3} xs={6}>
                            <Button type="primary" onClick={suggestUp}>赞成</Button>
                        </Col>
                        <Col push={6} xs={4}>
                            <Button type="primary" danger onClick={suggestDown}>反对</Button>
                        </Col>
                    </Row>
                </Card>
                <Divider/>
            </>
        },
        {
            label:'useState队列问题',
            key:'4',
            children: <>
                <Card  className={'card'}  title="useState的队列问题" style={{ width: 800 }}>
                    <Row>
                        <Col push={3} xs={12}>
                            loopValue:{loopValue}
                        </Col>
                    </Row>
                    <Divider/>
                    <Row>
                        <Col push={3} xs={6}>
                            <Button type="primary" onClick={loop}>loop</Button>
                        </Col>
                    </Row>
                </Card>
            </>
        }
    ]


    return (
        <>
            <Collapse items={collapseData} bordered={false}/>
        </>

    );

};

const UseStateFirst =  function (){
    const codeRef = useRef(null);
    const [code] = useState(`
    let [value,setValue] = useState(0);
    `)
    const processed = hljs.highlight(code, {
        language: 'javascript', // 通过 JavaScript 模式识别 JSX
        ignoreIllegals: true    // 允许 JSX 扩展语法
    }).value;
    return (
        <pre>
      <code
          className="hljs"
          dangerouslySetInnerHTML={{ __html: processed }}
      />
    </pre>
    )
}